<template>
  <div>
    <!--    标题-->
    <el-row>
      <el-col :span="24"><h1 style="text-align: center;font-family: '华文宋体'">供应商</h1></el-col>
    </el-row>
    <!--    表格-->
    <el-row>
      <el-col :span="24">
        <el-table :data="cutBean.records" style="width: 100%;height: 200px">
          <el-table-column prop="name" label="供应商名称" width="200"/>
          <el-table-column prop="user" label="负责人" width="200"/>
          <el-table-column prop="scope" label="经营范围" width="200"/>

          <el-table-column fixed="right" label="操作" width="300">
            <template #default="scope">
              <el-button type="primary" size="small" @click="infoVisible=true,findById(scope.row)">查看
                <el-icon>
                  <Delete/>
                </el-icon>
              </el-button>
              <el-button type="primary" size="small" @click="updateVisible=true,findById(scope.row)">修改
                <el-icon>
                  <Grape/>
                </el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--   分页 -->
    <el-pagination
        v-model:currentPage="cutBean.current"
        v-model:page-size="cutBean.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutBean.total"
        @current-change="findByItem"
    />
    <el-row style="margin-top: 50px">
      <el-col :span="5"></el-col>
      <!--      添加按钮-->
      <el-col :span="8">
        <div>
          <el-button @click="addVisible=true">
            添加供应商
          </el-button>
        </div>
        <div>
          <el-button @click="addAllVisible=true">
            文件添加供应商
          </el-button>
        </div>

      </el-col>
      <!--      右边部分-->
      <el-col :span="9"
              style="border: 2px solid black;height: 200px;line-height: 50px;text-align: start;font-weight: bold;background-color:whitesmoke ">
        <div class="">
          <el-row>

            <el-col :span="8">
              供应商名称：
            </el-col>
            <el-col :span="7">
              <input type="text" v-model="findObj.name">
            </el-col>
          </el-row>

        </div>
        <div>
          <el-row>
            <el-col :span="8">
              经营范围 ：
            </el-col>
            <el-col :span="7">
              <input type="text" v-model="findObj.scope">
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row>
            <el-col :span="13"></el-col>
            <el-col :span="5">
              <el-button type="primary" @click="findByItem(1)">
                <el-icon>
                  <Coffee/>
                </el-icon>
                搜索
              </el-button>
            </el-col>
          </el-row>

        </div>
      </el-col>
    </el-row>
    <!--查看供应商-->
    <el-dialog
        v-model="infoVisible"
        title="供应商信息"
        width="40%"
    >
      <el-row style="width: 100%;line-height: 40px">
        <el-col :span="4">
          <p>供应商名称:</p>
          <p>负责人: </p>
          <p>负责人电话: </p>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="7">
          <p>{{ supplierObj.name }}</p>
          <p>{{ supplierObj.user }}</p>
          <p>{{ supplierObj.phone }}</p>
        </el-col>
        <el-col :span="4">
          <p>供应商地址:</p>
          <p>经营范围: </p>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="7">
          <p>{{ supplierObj.address }}</p>
          <p>{{ supplierObj.scope }}</p>
        </el-col>
      </el-row>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="infoVisible = false">确定</el-button>
      </span>
      </template>
    </el-dialog>
    <!--addAll-->

    <el-dialog
        v-model="addAllVisible"
        title="上传文件"
        width="40%"
    >
      <el-row style="width: 100%;line-height: 40px">

        <input type="file" ref="textFile">
        <br>

        <el-button @click="addAllVisible=false,addAll()">导入</el-button>

      </el-row>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addAllVisible = false">确定</el-button>
      </span>
      </template>
    </el-dialog>
    <!--      添加信息弹出框-->
    <el-dialog
        v-model="addVisible"
        title="添加供应商信息"
        width="35%"
    >
      <el-form
          ref="userForm"
          :model="addObj"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
          style="width: 340px;font-weight: bold"
      >
        <el-form-item label="供应商名称：" prop="">
          <el-input v-model="addObj.name"/>
        </el-form-item>
        <el-form-item label="负责人：" prop="">
          <el-input v-model="addObj.user"/>
        </el-form-item>
        <el-form-item label="负责人电话：" prop="">
          <el-input v-model="addObj.phone"/>
        </el-form-item>
        <el-form-item label="供应商地址：" prop="">
          <el-input v-model="addObj.address"/>
        </el-form-item>
        <el-form-item label="经营范围：" prop="">
          <el-input v-model="addObj.scope"/>
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="addVisible = false,addClient()">添加</el-button>
      </span>
      </template>
    </el-dialog>

    <!--   修改div -->
    <el-dialog
        v-model="updateVisible"
        title="修改供应商信息"
        width="40%">

      <el-row style="width: 100%;line-height: 40px">
        <el-col :span="4">
          <p>供应商名称:</p>
          <p>负责人: </p>
          <p>负责人电话: </p>
        </el-col>
        <el-col :span="7">
          <p>{{ updateObj.name }}</p>
          <p>
            <el-input v-model="updateObj.user"/>
          </p>
          <p>
            <el-input v-model="updateObj.phone"/>
          </p>
        </el-col>
        <el-col :span="4">
          <p>供应商地址:</p>
          <p>经营范围: </p>
        </el-col>
        <el-col :span="7">
          <p>{{ updateObj.address }}</p>
          <p>{{ updateObj.scope }}</p>
        </el-col>
      </el-row>
      <template #footer>
      <span class="dialog-footer">
           <el-button @click="updateVisible = false">返回</el-button>
        <el-button @click="updateVisible = false,update()">修改</el-button>
      </span>
      </template>
    </el-dialog>


  </div>


</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cutBean: {},
      findObj: {},
      addVisible: false,
      infoVisible: false,
      updateVisible: false,
      addAllVisible: false,
      supplierObj: {},
      addObj: {},
      updateObj: {},


    }
  },
  methods: {
    findByItem(pageNO) {
      this.findObj.pageNO = pageNO;
      axios.get("/project/supplier/findByItem", {params: this.findObj}).then(resp => {
        this.cutBean = resp.data;
      });
    },
    findById(obj) {
      axios.get("/project/supplier/findById", {
        params: {
          supplierId: obj.id
        }
      }).then(resp => {
        this.supplierObj = resp.data;

        this.updateObj = resp.data;

      })

    },
    update() {
      axios.get("/project/supplier/update", {
        params: {
          supplierId: this.updateObj.id,
          person: this.updateObj.user,
          phone: this.updateObj.phone,
          scope: this.updateObj.scope
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
        }
      })

    },
    addClient() {
      axios.get("/project/supplier/add", {params: this.addObj}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
        }
      });
    },
    async addAll() {
      var fromObj = new FormData();
      fromObj.append("excelFile", this.$refs.textFile.files[0]);
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
      await axios.post("/project/supplier/addList", fromObj, config).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
        }
      });
    }
  },
  created() {
    this.findByItem(1)
  }
}
</script>

<style scoped>

</style>